<?php

use app\models\Mall;
use app\widgets\MallMBottomToolbarWidget;
use yii\helpers\Url;

$web = Url::base();
$institution_code = Mall::getCurrentInstitutionCode();
$site_name = \app\models\Mall::getCurrentInstitutionSiteName();
$this->title = $site_name . '-商品分类';
?>

<link rel="stylesheet" type="text/css" href="<?= $web ?>/css/mall-m/category.css"/>

<style type="text/css">
    .category-frame .category-content-frame .category-content .title {
        background-image: url(<?= $web ?>/images/mall-m/category-spliter.png);
        background-repeat: repeat-x;
        background-size: contain;
    }
</style>

<div class="main">
    <div class="header">
        <a class="search" href="<?= Url::to(['mall-m/search', 'institution_code' => $institution_code]) ?>">
            <img src="<?= $web ?>/images/mall-m/index-icon-search.png">
            <label>搜索商品</label>
        </a>
    </div>
    <div class="category-frame">
        <div class="category-left-frame">
            <?php
            foreach ($categoryList as $item) {
                ?>
                <a class="left-item" category_code="<?= $item['code'] ?>"><?= $item['name'] ?></a>
                <?php
            }
            ?>
            <!--<a class="left-item left-item-selected">精品家电</a>
            <a class="left-item">精品家电</a>-->

        </div>
        <script type="application/javascript">
            var contentHeight = $(window).height();
            contentHeight -= $('.header').height();
            contentHeight -= $('.tab-frame').height();
            $('.category-left-frame').height(contentHeight);
        </script>
        <?php
        foreach ($categoryList as $item) {
            ?>
            <div class="category-content-frame" category_code="<?= $item['code'] ?>" style="display: none;">
                <img class="top" data-original="<?= $item['image_url'] ?>">

                <?php
                foreach ($item['categoryLv2'] as $item2) {
                    ?>
                    <div class="category-content">
                        <div class="title">
                            <!--                            <div class="spliter"></div>-->
                            <div class="title-label-frame">
                                <label class="title-label"><?= $item2['name'] ?></label>
                            </div>
                            <!--                            <div class="spliter"></div>-->
                        </div>
                        <?php
                        foreach ($item2['categoryLv3'] as $item3) {
                            $linkUrl = Url::to(['mall-m/goods-list', 'goodsCategoryCode' => $item3['code'], 'goodsListTitle' => '商品分类:' . $item3['name'], 'institution_code' => $institution_code]);
                            if ($item['name'] == '时尚卡券') {
                                $linkUrl = Url::to(['mall-m/virtual-coupon-list', 'tagName' => $item3['name'], 'institution_code' => $institution_code]);
                            }
                            ?>
                            <a class="category-item" href="<?= $linkUrl ?>">
                                <img data-original="<?= $item3['image_url'] ?>@120w">
                                <label><?= $item3['name'] ?></label>
                            </a>

                            <?php
                        }
                        ?>
                    </div>
                    <?php
                }
                ?>

            </div>
            <?php
        }
        ?>
        <!-- <div class="category-content-frame">
           <img class="top" id='img_lv1'src="">

            <div class="category-content">
                <div class="title">
                    <div class="spliter"></div>
                    <div class="title-label">生活电器</div>
                    <div class="spliter"></div>
                </div>
                <a class="category-item">
                    <img src="<? /*= $web */ ?>/images/mall-m/category-2.jpg">
                    <label>智能设备</label>
                </a>
                <a class="category-item">
                    <img src="<? /*= $web */ ?>/images/mall-m/category-2.jpg">
                    <label>智能设备</label>
                </a>
            </div>
            <div class="category-content">
                <div class="title">
                    <div class="spliter"></div>
                    <div class="title-label">生活电器</div>
                    <div class="spliter"></div>
                </div>
                <a class="category-item">
                    <img src="<? /*= $web */ ?>/images/mall-m/category-2.jpg">
                    <label>智能设备</label>
                </a>
                <a class="category-item">
                    <img src="<? /*= $web */ ?>/images/mall-m/category-2.jpg">
                    <label>智能设备</label>
                </a>
            </div>
        </div>-->
        <script type="application/javascript">
            $('.category-content-frame').height(contentHeight);
        </script>
    </div>
    <?=MallMBottomToolbarWidget::widget(['actionName'=>'category'])?>
</div>

<script type="application/javascript">

    $(function () {
        //iniLazyload();
        $(document).scroll(function () {
            var contentHeight = $(window).height();
            contentHeight -= $('.header').height();
            contentHeight -= $('.tab-frame').height();
            $('.category-left-frame').height(contentHeight);
            $('.category-content-frame').height(contentHeight);
        });

        //点击1级分类
        $('.left-item').click(function () {
            setSelect(this);
        });

        //初始化选择
        var left_item = [];

        if (myStorage) {
            var current_category_code = myStorage.category_selected_code;
            if (current_category_code) {
                left_item = $('.left-item[category_code="' + current_category_code + '"]');
            }
        }

        if (left_item.length > 0) {
            setSelect(left_item.get(0));
        } else {
            setSelect($('.left-item').get(0));
        }

    });
    setSelect = function (me) {
        $('.left-item').removeClass('left-item-selected');
        $(me).addClass('left-item-selected');
        var category_code = $(me).attr('category_code');

        $('.category-content-frame').hide();
        var category_frame = $('.category-content-frame[category_code=' + category_code + ']');
        category_frame.show();
        category_frame.scrollTop(0);
        myImgLazyLoad(category_frame.get(0));
        //记录分类code
        if (myStorage) {
            myStorage.category_selected_code = category_code;
        }
    };

</script>
